<template>
	<view>
		<global-contact></global-contact>
		<!-- #ifdef MP-WEIXIN -->
		<view class="header">
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="header header-top-h5">
		<!-- #endif -->
			<image src="https://www.atuanjian.com/appletStatic/static/need/banner.png" mode="aspectFit"></image>
			<view class="head">
				<view class="title">蚂蚁团建</view>
				<view class="title">一站式团建采购平台</view>
			</view>
		</view>
		<view class="wrap">
			<view class="content">
				<view class="item">
					<view class="left">
						<image src="https://www.atuanjian.com/appletStatic/static/make/i1.png" mode="aspectFit"></image>
						<text>团建人数</text>
					</view>
					<view class="right">
						<view class="contain">
							<text>请选择类型</text>
							<image src="https://www.atuanjian.com/appletStatic/static/need/upload.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				 <view class="item">
				 	<view class="left">
				 		<image src="https://www.atuanjian.com/appletStatic/static/make/i2.png" mode="aspectFit"></image>
				 		<text>人均预算</text>
				 	</view>
				 	<view class="right">
				 		<view class="contain">
				 			<text>请选择类型</text>
				 			<image src="https://www.atuanjian.com/appletStatic/static/need/upload.png" mode="aspectFit"></image>
				 		</view>
				 	</view>
				 </view>
				<view class="item">
					<view class="left">
						<image src="https://www.atuanjian.com/appletStatic/static/make/i3.png" mode="aspectFit"></image>
						<text>团建天数</text>
					</view>
					<view class="right">
						<view class="contain">
							<text>请选择类型</text>
							<image src="https://www.atuanjian.com/appletStatic/static/need/upload.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<image src="https://www.atuanjian.com/appletStatic/static/make/i4.png" mode="aspectFit"></image>
						<text>联系人</text>
					</view>
					<view class="right">
						<input type="text" value="" placeholder="请输入" />
					</view>
				</view> 
				<view class="item">
					<view class="left">
						<image src="https://www.atuanjian.com/appletStatic/static/make/i5.png" mode="aspectFit"></image>
						<text>手机号码</text>
					</view>
					<view class="right">
						<input type="text" value="" placeholder="请输入" />
					</view>
				</view> 
				<view class="item">
					<view class="left">
						<image src="https://www.atuanjian.com/appletStatic/static/need/i3.png" mode="aspectFit"></image>
						<text>微信号</text>
					</view>
					<view class="right">
						<input type="text" value="" placeholder="请输入" />
					</view>
				</view>
				<view class="item"> 
						<input class="input" type="text" value="" placeholder="请输入验证码" />
						<view class="code">获取验证码</view>
					 
				</view>
				<view class="submit">提交需求</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1:''
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.header{
		width: 750rpx;
		height: 320rpx;
		position: relative;
		image{
			width: 750rpx;
			height: 320rpx;
		}
		.head{
			width: 750rpx;
			height: 320rpx;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,.4);
			.title{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 50rpx;
				color: #FFFFFF;
				padding-left: 40rpx;
			}
			.title:nth-child(1){
				padding-top: 112rpx;
			}
			.title:nth-child(2){
				margin-top: 16rpx;
			}
		}
	}
	.wrap{
		.content{
			position: relative;
			top: -40rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			padding: 40rpx 40rpx 20rpx 42rpx;
			.item{
				@include flex_style(space-between,center,row nowrap);
				margin-bottom: 24rpx;
				.left{
					@include flex_style(flex-start,center,row nowrap);
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
					text{
						width: 112rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: #1A1A1A;
					}
				}
				.right{
					width: 486rpx;
					.contain{
						width: 486rpx;
						height: 72rpx;						
						border: 1rpx solid #E1E1E1;
						@include flex_style(space-between,center,row nowrap);
						box-sizing: border-box;
						padding: 0 14rpx 0 20rpx;
						text{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 40rpx;
							color: #333333;
						}
						image{
							width: 27rpx;
							height: 15rpx;
						}
					}
					.date{
						height: 72rpx;
						@include flex_style(space-between,center,row nowrap);
						text{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 40rpx;
							color: #333333;
						}
						.start{
							width: 212rpx;
							height: 72rpx;
							box-sizing: border-box;
							padding: 0 12rpx 0 20rpx;
							border: 1rpx solid #E1E1E1;
							image{
								width: 27rpx;
								height: 15rpx;
							}
							@include flex_style(space-between,center,row nowrap);
							
						}
					}
					input{
						margin: 0;
						padding: 0;
						width: 486rpx;
						height: 72rpx;
						box-sizing: border-box;
						padding-left: 20rpx;
						outline: none;
						background-color: #FFFFFF;		
						border: 1rpx solid #E1E1E1;
						color: #999999;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
					}
				}
				.input{
					width: 460rpx;
					height: 72rpx; 
					border: 1rpx solid #E1E1E1;
					outline: none;
					background-color: #FFFFFF;
					box-sizing: border-box;
					padding-left: 20rpx;
					margin-right: 26rpx; 
					color: #999999;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}
				.code{
					width: 176rpx;
					line-height: 72rpx;
					background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%);
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400; 
					color: #FFFFFF;
					text-align: center;
				}
			}
			.submit{
				width: 670rpx;
				height: 92rpx;
				background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%); 
				border-radius: 46rpx;	
				margin: 120rpx auto 0;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 92rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>
